<template>
  <div>
    <div class="header">
      <van-nav-bar title="详情页" @click-left="onClickLeft">
        <template #right>
          <van-popover
            v-model="showPopover"
            trigger="click"
            :actions="actions"
            placement="bottom-end"
            theme="dark"
            @select="onSelect"
          >
            <template #reference>
              <van-icon name="ellipsis" size="30" color="black" />
            </template>
          </van-popover>
        </template>
        <template #left>
          <van-icon name="arrow-left" size="30" color="black" />
        </template>
      </van-nav-bar>
    </div>
    <div class="banner">
      <van-swipe class="my-swipe" :autoplay="3000">
        <van-swipe-item v-for="(item, index) in bannerList" :key="index">
          <img :src="item" />
        </van-swipe-item>
      </van-swipe>
    </div>
    <van-goods-action>
      <van-goods-action-icon icon="chat-o" text="客服" color="#ee0a24" />
      <van-goods-action-icon icon="cart-o" text="购物车" />
      <van-goods-action-icon icon="star" text="已收藏" color="#ff5000" />
      <van-goods-action-button
        type="warning"
        text="加入购物车"
        @click="isShowSku = !isShowSku"
      />
      <van-goods-action-button type="danger" text="购买" />
    </van-goods-action>
    <van-share-sheet
      v-model="showShare"
      title="立即分享给好友"
      :options="options"
      @select="onSelect1"
    />
    <div class="title">
      <h4>{{ title }}</h4>
    </div>
    <div class="price">
      <p>{{ price }}</p>
    </div>
    <!--  -->
    <!-- sku -->
    <van-sku
      v-model="isShowSku"
      :sku="sku"
      :goods="goods"
      :hide-stock="sku.hide_stock"
      @buy-clicked="onBuyClicked"
      @add-cart="onAddCartClicked"
      :quota-used="quotaUsed"
    />
    <!--     :goods-id="goodsId"
    :quota="quota"
    :quota-used="quotaUsed"
  :hide-stock="sku.hide_stock"
  :message-config="messageConfig"
 -->
  </div>
</template>

<script>
import { getBannerList, AddCartList } from "../request/api";
export default {
  data() {
    return {
      // sku展示数据
      cartproid: "",
      isShowSku: false,
      customStepperConfig: 2,

      quotaUsed: 2,
      sku: {
        // 数据结构见下方文档
        tree: [],
        hide_stork: true,
        price: "1.0",
        stock_num: 227,
      },
      goods: {
        picture: "",

        // 数据结构见下方文档
      },
      messageConfig: {
        // 数据结构见下方文档
      },
      // 以下是详情页的展示数据
      bannerList: [],
      showPopover: false,
      actions: [
        { text: "首页", icon: "wap-home-o" },
        { text: "分享", icon: "share-o" },
      ],

      showShare: false,
      options: [
        { name: "微信", icon: "wechat" },
        { name: "微博", icon: "weibo" },
        { name: "复制链接", icon: "link" },
        { name: "分享海报", icon: "poster" },
        { name: "二维码", icon: "qrcode" },
      ],
      price: 0,
      title: "",
    };
  },
  methods: {
    //
    quota(){},
    onClickLeft() {
      this.$router.go(-1);
    },
    onSelect1(option) {
      Toast(option.name);
      this.showShare = false;
    },
    onSelect(action, index) {
      switch (index) {
        case 0:
          this.$router.go(-1);
          break;
        case 1:
          this.showShare = true;
          break;
        default:
          break;
      }
    },
    // 购物车添加数据
    onAddCartClicked() {
      AddCartList({
        token: localStorage.getItem("token"),
        userid: localStorage.getItem("userid"),
        num: 1,
        proid: this.cartproid,
      }).then((res) => {
        console.log(res);
      });
    },
    onBuyClicked() {},
  },
  created() {
    // 接收传递的参数
    // console.log(this.$route.params.proid)
    getBannerList(this.$route.params.proid).then((res) => {
      console.log(res.data.data);
      // 商品详情数购物车参数据
      this.bannerList = res.data.data.banners[0].split(",");
      this.price = res.data.data.originprice;
      this.title = res.data.data.proname;
      // 购物车参数
      this.cartproid = res.data.data.proid;
      //  sku数据成佛杀悟空，悟空杀你我
      this.goods.picture = res.data.data.img1;
      this.sku.price = res.data.data.originprice;
      this.sku.stock_num = res.data.data.stock;
      // 调整组件的样式不起作用前面加/deep/
    });
  },
};
</script>
<style scoped>
img {
  width: 100%;
  height: 3rem;
}

p {
  text-align: center;
}
</style>